<template>
	<scroll-view scroll-x="true" class="tab-scroll">
		<view 
			class="tab-item font28 color-b3" 
			v-for="(item, index) in tabList" 
			:key="index"
			:class="[tabIndex == index ?'active':'']"
			@click="change(index,item)"
		>
			{{ item}}
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref,defineEmits,onMounted } from 'vue';
	  import emitter from '@/util/Bus.ts';

	const emit = defineEmits(['getItem'])
	const props = defineProps({
		contentHeight: {
			type: Number,
			default: 0
		},
		tabList:{
			type: [Object, Array,String],
			default: 0
		}
	});
	
	
	const tabIndex = ref(0)
	function change(index,item){
		tabIndex.value = index
		console.log(item,'item')
		emit('getItem',index)
	}
	onMounted(() => {
	   emitter.on('index', (e) => {
		console.log(e,'e')
	    tabIndex.value = 0;
	   });
	 });
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 524rpx;
		white-space: nowrap;
	}
	.tab-item {
		padding: 8rpx 14rpx;
		display: inline-block;
		border-radius: 36rpx;
		background-color: #F5F7FB;
		margin-right: 10rpx;
		&.active {
			color: #3FA897;
			background-color: #EAF4F2;
		}
	}
</style>
